﻿<div id="registerModal" class="modal show" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h1 class="text-center">
                    <span class="fa-stack fa-1x">
                        <i class="fa fa-circle fa-stack-2x text-primary"></i>
                        <i class="fa fa-user-plus fa-stack-1x fa-inverse"></i>
                    </span>Register
                </h1>
            </div>
            <div class="modal-body">
                <form class="form col-md-12 center-block" #registerForm="ngForm">
                    <div class="form-group">
                        <input type="text" class="form-control input-lg" placeholder="Username" [(ngModel)]="_newUser.Username" 
                               name="username" #username="ngModel" required>
                        <div [hidden]="username.valid || username.untouched" class="alert alert-danger">
                            Username is required
                        </div>
                    </div>
                    <div class="form-group">
                        <input type="email" class="form-control input-lg" placeholder="Email" [(ngModel)]="_newUser.Email" 
                               name="email" #email="ngModel" required>
                        <div [hidden]="email.valid || email.untouched" class="alert alert-danger">
                            Email is required
                        </div>
                    </div>
                    <div class="form-group">
                        <input type="password" class="form-control input-lg" placeholder="Password" [(ngModel)]="_newUser.Password" 
                               name="password" #password="ngModel" required>
                        <div [hidden]="password.valid || password.untouched" class="alert alert-danger">
                            Password is required
                        </div>
                    </div>
                    <div class="form-group">
                        <button class="btn btn-primary btn-lg btn-block" (click)="register()" [disabled]="!registerForm.form.valid">Register</button>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <div class="col-md-12">
                    <a class="btn btn-danger pull-left" [routerLink]="['/account/login']" data-dismiss="modal" aria-hidden="true">Cancel</a>
                </div>
            </div>
        </div>
    </div>
</div>